<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评论管理系统</title>
		<!-- 1. 先加载Vue核心库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

		<!-- 2. 加载Element UI样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

		<!-- 3. 加载Element UI组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<!-- 4. 加载axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<!-- 5. 最后加载自定义JS -->
		<script src="../js/common.js"></script>
		<script src="../js/authChecker.js"></script>
		<!-- 移除重复的库引用 -->
		<!-- 删除以下重复引用 -->
		<!-- <script src="../js/vue.js"></script> -->
		<!-- <script src="../js/elementui.js"></script> -->
		<!-- <script src="../js/axios.min.js"></script> -->

		<!-- 引入自定义样式 -->
		<link rel="stylesheet" href="../css/discuss/discuss.css">
	</head>
	<body>
		<div id="app">
			<div class="page-title">评论管理</div>
			<el-row>
				<el-col :span="6">
					<el-input style="display:inline" v-model="searchKey" placeholder="请输入评论内容/用户名称/蛋糕名字"
						clearable></el-input>
				</el-col>
				<el-button @click="onSearch" type="primary" class="purple-search-btn">搜索</el-button>
				<el-button @click="resetSearch" type="info" plain>重置</el-button>
			</el-row>

			<el-table :data="discussList" style="width: 1400px" height="600"
				:header-cell-style="{background:'#f2f2f2', color:'#606266'}" v-loading="loading">
				<el-table-column prop="discussid" label="评论ID" width="100" fixed></el-table-column>
				<el-table-column prop="orderid" label="订单ID" width="100"></el-table-column>
				<el-table-column prop="username" label="用户名称" width="150"></el-table-column>
				<el-table-column prop="cakename" label="蛋糕名称" width="150"></el-table-column>
				<el-table-column prop="discusscontent" label="评论内容" width="300"></el-table-column>
				<el-table-column prop="discusstime" label="评论时间" width="150">
					<template slot-scope="scope">
						{{ formatDate(scope.row.discusstime) }}
					</template>
				</el-table-column>
				<el-table-column label="评论图片" width="200">
					<template slot-scope="scope">
						<div class="comment-images" v-if="scope.row.imageUrls && scope.row.imageUrls.length > 0">
							<img v-for="(img, index) in scope.row.imageUrls" :key="index" :src="img"
								class="comment-image" @click="showImageDialog(img)">
						</div>
						<span v-else>无图片</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination style="margin-left: 500px;" background layout="prev, pager, next" :total="total"
				:page-size="pageSize" :current-page="currentPage" @current-change="currentChange">
			</el-pagination>

			<!-- 图片预览对话框 -->
			<el-dialog :visible.sync="imageDialogVisible" width="50%">
				<img :src="currentImage" style="width: 100%;">
			</el-dialog>
		</div>

		<script>
			// 在页面加载时立即检查登录状态
			if (!checkAdminLogin()) {
				// 登录检查失败，阻止页面继续加载
				console.log('登录验证失败，已跳转至登录页');
			} else {
				new Vue({
					el: "#app",
					data: {
						searchKey: '', // 搜索关键词
						discussList: [], // 评论列表数据
						total: 0, // 总记录数
						pageSize: 12, // 每页显示数量
						currentPage: 1, // 当前页码
						loading: false, // 加载状态
						imageDialogVisible: false, // 图片预览对话框
						currentImage: '' // 当前预览的图片
					},
					methods: {
						// 加载评论列表
						loadDiscusses() {
							this.loading = true;
							let apiUrl = API + 'discuss/selectAllDis';
							let params = {
								page: this.currentPage,
								pageSize: this.pageSize
							};

							// 如果有搜索关键词，使用搜索接口
							if (this.searchKey && this.searchKey.trim() !== '') {
								apiUrl = API + 'discuss/selectAllDisByKey';
								params.keyword = this.searchKey;
							}

							axios.get(apiUrl, {
									params
								})
								.then(response => {
									if (response.data.code === 200) {
										const data = response.data.data;
										const pageInfo = data.discussPageInfo || data;

										this.discussList = pageInfo.list;
										this.total = pageInfo.total;

										// 加载每个评论的图片
										this.loadImagesForDiscusses();
									} else {
										this.$message.error(response.data.message || '获取评论列表失败');
									}
								})
								.catch(error => {
									console.error('加载评论数据失败:', error);
									this.$message.error('加载评论数据失败，请稍后重试');
								})
								.finally(() => {
									this.loading = false;
								});
						},

						// 为每条评论加载图片
						loadImagesForDiscusses() {
							this.discussList.forEach(discuss => {
								axios.get(API + 'discuss/images/' + discuss.discussid)
									.then(response => {
										if (response.data.code === 200) {
											this.$set(discuss, 'imageUrls', response.data.data.images || []);
										}
									})
									.catch(error => {
										console.error('加载评论图片失败:', error);
									});
							});
						},

						// 搜索
						onSearch() {
							this.currentPage = 1; // 搜索时重置为第一页
							this.loadDiscusses();
						},

						// 重置搜索
						resetSearch() {
							this.searchKey = '';
							this.currentPage = 1;
							this.loadDiscusses();
						},

						// 分页变化
						currentChange(page) {
							this.currentPage = page;
							this.loadDiscusses();
						},

						// 格式化日期
						formatDate(dateStr) {
							if (!dateStr) return '';
							const date = new Date(dateStr);
							return date.getFullYear() + '-' +
								(date.getMonth() + 1).toString().padStart(2, '0') + '-' +
								date.getDate().toString().padStart(2, '0');
						},

						// 显示图片对话框
						showImageDialog(imgUrl) {
							this.currentImage = imgUrl;
							this.imageDialogVisible = true;
						},

						// 处理删除按钮点击
						handleDelete(index, row) {
							this.$confirm('确定删除该评论吗？', '提示', {
									type: 'warning'
								})
								.then(() => {
									this.loading = true;
									axios.delete(`${API}discuss/${row.discussid}`)
										.then(response => {
											if (response.data.code === 200) {
												this.$message.success('删除成功');
												this.loadDiscusses();
											} else {
												this.$message.error(response.data.message || '删除失败');
											}
										})
										.catch(error => {
											console.error('删除出错:', error);
											this.$message.error('删除失败，请稍后重试');
										})
										.finally(() => {
											this.loading = false;
										});
								})
								.catch(() => {
									this.$message.info('已取消删除');
								});
						}
					},
					mounted() {
						this.loadDiscusses();
					}
				});
			}
		</script>
	</body>
</html>